<template>
	<view>
		<view v-if="userInfoOpenId!=''">
			<view class="info">
				<view class="text">{{Infomation==''?'请绑定身份':'点击发亮的图标哦!'}}</view>
				<view style="display: flex;">
					<view class="cur" v-for="(item,index) in list" :key="index" @click="topath(index)" :class="i==index?'blue':''">
						<view v-if="index===i">
							<image class="img" :src="path+item.active+png"></image>
						</view>
						<view v-else>
							<image class="img" :src="path+item.img+png"></image>
						</view>
					</view>
				</view>
				<view class="div-line"></view>
				<view style="display:flex;">
					<view class="item-text" v-for="(item,index) in text" :key="index">
						<text>{{item}}</text>
					</view>
				</view>
			</view>
		</view>
		<view v-else>
			<nodataView></nodataView>
		</view>
	</view>
</template>

<script>
	import nodataView from '@/components/nodataView/nodataView.vue'
	export default {
		props:{
			// navData:String
		},
		onLoad(options) {
			// this.navData = options.navData
			 //Infomation
		},
		data() {
			return {
				path: '/static/img/my/',
				png: '.png',
				list: [{
						img: '1',
						active: '11'
					},
					{
						img: '2',
						active: '22'
					},
					{
						img: '3',
						active: '33'
					},
				],
				text: ['教师', '学生', '企业'],
				i: -1,
				role: '',
				// navData:"",
				userInfoOpenId:null,
				Infomation:null
			};
		},
		components:{
			nodataView
		},
		created() {
			this.role = uni.getStorageSync("role");
			this.userInfoOpenId = uni.getStorageSync("userInfoOpenId");
			this.Infomation = uni.getStorageSync("Infomation");
			console.log(this.Infomation, "---------")
			console.log(this.userInfoOpenId,"---------")
			if (this.role == 'student') {
				this.i = 1;
			}
			if (this.role == 'enterprise') {
				this.i = 2;
			}
			if (this.role == 'teacher') {
				this.i = 0;
			}
		},
		methods: {
			topath(index) {

				if(this.role!=="teacher"&&this.role!=="enterprise"&&this.role!=="student"){
					/* //根据角色判断--跳转
					if (index == 1) {
						uni.navigateTo({
							// url: "../student/info?studentInfo="+this.navData,
							url: "../student/info",
						});
						// console.log(this.navDat);
						
					}
					if (index == 3) {
						uni.navigateTo({
							url: 'infodetail'
						});
						console.log(index);
					}
					if (index == 0) {
						uni.navigateTo({
							url: "../teacher/info"
						});
						console.log(index);
					} */
					this.i =index;
					//信息绑定
					uni.navigateTo({
						url:"/pages/my/company/bindinfo/bindinfo?key="+this.i,
						success(res) {
							console.log(res)
						},
						fail() {
							console.log(res)
						},
					})
					
				}else{
					//判断是否点击其他按钮
					if (this.i == index) {
						//根据角色判断--跳转
						if (this.role == 'student') {
							uni.navigateTo({
								// url: "../student/info?studentInfo="+this.navData,
								url: "/pages/my/student/info",
							});
							// console.log(this.navDat);
						}
						if (this.role == 'enterprise') {
							uni.navigateTo({
								url: '/pages/my/company/infodetail'
							});
							console.log(index);
						}
						if (this.role == 'teacher') {
							uni.navigateTo({
								url: "/pages/my/teacher/info"
							});
							console.log(index);
						}
						// uni.navigateTo({
						// 	url: "../teacher/info"
						// });
						// console.log(index);
						// this.i = index;
					}
				}
			}
		},
	}
</script>

<style lang="scss">
	page {
		background-color: rgba(78, 78, 78, 0.05);
	}

	.info {
		width: 100%;
		margin-top: 30upx;
		height: 600upx;
		font-weight: bold;
		background-color: white;
	}

	.text {
		padding-top: 40upx;
		font-size: 35upx;
		text-align: center;
		letter-spacing: 4upx;
		color: #4E4E4E;
	}

	.div-line {
		height: 30upx;
	}

	.cur {
		margin-top: 100upx;
		margin-left: 60upx;
		width: 170upx;
		height: 170upx;
		border-radius: 100%;
		background-color: #F5F5F5;
	}

	.blue {
		margin-top: 100upx;
		margin-left: 60upx;
		width: 170upx;
		height: 170upx;
		border-radius: 100%;
		background-color: #357DC5;

	}

	.item-text {
		font-size: 33upx;
		width: 120upx;
		margin-left: 110upx;
		color: #717171;
	}

	.img {
		width: 120upx;
		height: 120upx;
		position: relative;
		top: 22upx;
		left: 25upx;
	}
</style>
